<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读者管理</title>
    <link rel="stylesheet" href="../../css/my_serve.css">
    <script src="../../public/layui/layui.js"></script>
    <link rel="stylesheet" href="../../public/layui/css/layui.css">
</head>
<body>
<div class="container">
    <table id="dataTable" lay-filter="dataTable"></table>
</div>

<div class="layui-btn-group" id="toolbar" style="display: none;">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="show">查看资料</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="update">修改</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
</div>

<div class="layui-btn-group layui-form-item" id="search" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">读者名</label>
        <div class="layui-input-inline">
            <input type="tel" name="phone" autocomplete="off" class="layui-input" placeholder="输入读者名">
        </div>
    </div>
    <button type="button" class="layui-icon layui-btn layui-btn-normal" lay-event="add">&#xe615;搜索</button>
    <button type="button" class="layui-icon layui-btn layui-btn-normal" lay-event="deleteAll">&#xe654;添加</button>
</div>

<script>
    layui.use(['table'],function () {
        let table = layui.table;

        table.render({
            elem: '#dataTable',
            height: 600,
            url: 'users.json',
            page: true,
            toolbar: '#search',
            cols: [[
                {field: 'id', title: 'ID',width: 100, sort: true, align: 'center'},
                {field: 'username', title: '姓名', sort: true, align: 'center'},
                {field: 'age', title: '年龄', align: 'center'},
                {field: 'sex', title: '性别',width: 100, align: 'center'},
                {field: 'job', title: '职业', align: 'center'},
                {field: 'toolbar', title: '操作',align: 'center', toolbar: '#toolbar'}
            ]]
        });
    });
</script>
</body>
</html>